<template>
	<div class="container">
		<div class="jx-container">
      <div class="select-type">
        <div class="item">
          <span>店铺组</span>
          <div class="right" v-loading="boo.typeload">
            <span v-for="(item, index) in typelist" :key="index" :class="params_list.shopGroupName == item.shopGroupName ? 'active' : ''" @click="selected(item)">{{item.shopGroupName}}</span>
          </div>
        </div>
        <!-- <div class="item table-item">
          <div class="right">
            <div class="item-inline">
              <span>店铺名称</span>
              <el-input class="tel-value" v-model="params_list.shopName" placeholder="请输入店铺名称"></el-input>
            </div>
            <div class="item-inline">
              <el-button class="jx-btn" type="primary" @click="search">搜索</el-button>
            </div>
          </div>
        </div> -->
      </div>
      <div class="jx-table">
        <div class="title">
          <img class="icon" src="/static/img/icon-platform.png"/>
          店铺组
          <div class="add-new">
            <el-button class="jx-btn" type="primary" @click="addRow">新建分组</el-button>
          </div>
        </div>
        <el-table :data="group" border style="width: 100%" v-loading="boo.loading">
          <el-table-column type="index" label="序列" width="60" align="center">
            <template slot-scope="scope">
              <span>{{(scope.$index + 1) + ((params_list.page - 1) * params_list.size)}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="createAt" label="创建时间" width="150" align="center" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="createMan" label="创建人" align="center" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="shopGroupName" label="小组名称" align="center" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="shopCount" label="小组成员" align="center">
          </el-table-column>
          <el-table-column label="操作" width="150" align="center">
            <template slot-scope="scope">
              <el-button @click="viewRow(scope.row,1)" type="text" size="small">成员管理</el-button>
              <el-button @click="hiddenRow(scope.row)" type="text" size="small">解散</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div v-if="group.length != 0" class="jx-pagination">
          <el-pagination @current-change="pageChange" @size-change="handleSizeChange" :current-page="params_list.page" :page-sizes="[10,50,100]" :page-size="params_list.size" layout="total, sizes, prev, pager, next, jumper"
            :total="other.allRow">
          </el-pagination>
        </div>
      </div>
    </div>
    <!-- 成员管理 -->
    <el-dialog  :visible.sync="boo.showDetail" class="jx-dialog" width="75%">
      <div slot="title" class="header-title">
        <span class="title-name">成员管理</span>
      </div>
      <div class="jx-detail">
        <div class="detail-item" style="margin-bottom: 45px">
          <div class="list">
            <span>添加店铺：</span>
            <div class="right">
              <el-input class="tel-value" v-model="shop.name" placeholder="请输入店铺名称"></el-input>
              <el-button class="jx-btn" type="primary" @click="addShop">添加</el-button>
            </div>
          </div>
        </div>
        <div class="detail-item">
          <div class="item">
            <div class="title" style="margin-bottom: 30px;">
              成员管理
              <div class="add-new">
                <span>搜索成员</span>
                <el-input class="tel-value" v-model="shop.name" placeholder="请输入店铺名称"></el-input>
                <el-button class="jx-btn" type="primary" @click="shop_search">搜索</el-button>
              </div>
            </div>
            <div class="jx-table" style="padding: 0">
              <el-table :data="currentRow" border style="width: 100%" v-loading="boo.shoploading">
                <el-table-column type="index" label="序列" width="60" align="center">
                </el-table-column>
                <el-table-column prop="shopName" label="店铺名称" width="120" align="center">
                </el-table-column>
                <el-table-column prop="shopLocationProvinceCity" label="所在地区" align="center" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="managerName" label="负责人" align="center" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="managerPhone" label="负责人电话" align="center" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="applyAt" label="加入时间" align="center" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="operateMan" label="操作人" align="center" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column label="操作" width="100" align="center">
                  <template slot-scope="scope">
                    <el-button @click="deteleRow(scope.row)" type="text" size="small">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
    <!-- 新建分组 -->
    <el-dialog  :visible.sync="boo.showDialog" class="jx-dialog" width="75%">
      <div slot="title" class="header-title">
        <span class="title-name">新建小组</span>
      </div>
      <div class="jx-detail">
        <div class="detail-item" style="margin-bottom: 45px">
          <div class="list">
            <span>小组名称：</span>
            <div class="right">
              <el-input class="tel-value" v-model="shop.name" placeholder="请输入店铺名称"></el-input>
            </div>
          </div>
        </div>
      </div>
      <div class="btn-container">
        <el-button class="jx-btn" type="primary" :loading="boo.saveing" @click="submitRow">立即创建</el-button>
      </div>
    </el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
        https: {
          list: this.$api.merchant.group,
        },
        boo: {
          loading: false,
          typeload: false,
          showDialog: false,
          showDetail: false,
          shoploading: false,
          saveing: false,
        },
        other: {
          allRow: 1,
        },
        group: '',
        currentRow: '',
        params_list: {
          page: 1,
          size: 10,
          shopGroupName: '全部',
          shopName: '',
        },
        shop: {
          name: '',
        },
        typelist: '',
			}
		},
		mounted(){
      let _self = this
      _self.getList()
      _self.getType()
    },
		methods: {
      getType(){
        let _self = this
        _self.boo.typeload = true
        let success = (res)=>{
          res = res.data
          if(res.retCode == 1){
            _self.typelist = res.retObject
            _self.typelist.unshift({
              shopGroupName: '全部',
            })
          }else{
            _self.$message.error(res.retMsg)
          }
          _self.boo.typeload = false
        }
        _self.$axios.get(_self.https.list.page, {}, success) 
      },
      getList(){
        let _self = this
        let params = {
          pageNumber: _self.params_list.page,
          pageSize: _self.params_list.size,
          shopGroupName: _self.params_list.shopGroupName == '全部' ? '' : _self.params_list.shopGroupName,
          shopName: _self.params_list.shopName,
          orderBy: '',
        }
        _self.boo.loading = true
        let success = (res)=>{
          res = res.data
          if(res.retCode == 1){
            _self.group = res.retObject.list
            _self.other.allRow = Number(res.retObject.totalRow)
          }else{
            _self.$message.error(res.retMsg)
          }
          _self.boo.loading = false
        }
        _self.$axios.get(_self.https.list.list, params, success) 
      },
      search(){
        let _self = this
        _self.getList()
      },
      pageChange(val){
        let _self = this
        _self.params_list.page = val
        _self.getList()
      },
      handleSizeChange(val) {
        let _self = this
        _self.params_list.size = val
        _self.getList()
      },
      selected(item){
        let _self = this
        _self.params_list.shopGroupName = item.val
        _self.getList()
      },
      addRow(){
        let _self = this
        _self.boo.showDialog = true
      },
      viewRow(item){
        let _self = this
        _self.boo.showDetail = true
        _self.getshoplist(item.shopGroupId)
      },
      hiddenRow(item){
        let _self = this
      },
      addShop(){

      },
      getshoplist(id){
        let _self = this
        let params = {
          pageNumber: 1,
          pageSize: 10,
          shopGroupId: id,
          shopName: _self.shop.name,
          orderBy: '',
        }
        _self.boo.shoploading = true
        let success = (res)=>{
          res = res.data
          if(res.retCode == 1){
            _self.currentRow = res.retObject
          }else{
            _self.$message.error(res.retMsg)
          }
          _self.boo.shoploading = false
        }
        _self.$axios.get(_self.https.list.detail, params, success) 
      },
      deteleRow(){

      },
      shop_search(){
        let _self = this
        _self.getshoplist()
      },
      submitRow(){

      }
    }
	}

</script>
<style scoped lang="sass">
  .select-type .item
    display: flex
  .select-type .table-item .right span
    width: 62px
  .jx-detail
    .detail-item
      .list 
        padding-left: 10px
      .right
        .tel-value
          width: 180px
        .jx-btn.el-button
          margin-left: 10px
    .title
      .add-new
        float: right
        color: #999
        font-weight: 500
        font-size: 14px
        &::after
          content: ''
          display: block
          clear: both
        .tel-value
          display: inline-block
          width: 180px
          margin: 0 10px
</style>
